<script lang="ts" setup>
import { reactive, ref } from 'vue'
import useUpload from '../../composition/useUpload'
import { useUserStore } from '../../store/userStore'
import useUser from '../../composition/useUser'

const form = reactive({
   nickname: '',
   hobby: '',
   avatar: ''
})

const { uploadFile } = useUpload()
const { getUserInfo } = useUserStore()
const { upUserInfo } = useUser()

const afterRead = async (file: any) => {
   let params = new FormData()
   params.append('file', file.file)
   const res = await uploadFile(params)
   form.avatar = res.data.url
}

const res = await getUserInfo()
const previewImage = ref([{ url: res.data.avatar, isImage: true }])
form.nickname = res.data.nickname as string
form.hobby = res.data.hobby as string

const submit = async () => {
   const res = await upUserInfo(form)
   console.log(res)
}

const onClickLeft = () => history.back()
</script>

<template>
   <div>
      <van-nav-bar :title="$route.meta.title" left-text="返回" left-arrow @click-left="onClickLeft" />
      <van-form class="p-10">
         <van-cell-group inset class="flex flex-col items-center">
            <van-uploader
               class="w-full mx-auto w-20 h-20"
               v-model="previewImage"
               :multiple="false"
               :max-count="1"
               :after-read="afterRead"
               preview-size="70px" />

            <van-field v-model="form.nickname" name="nickname" label="昵称" placeholder="请输入昵称" />
            <van-field v-model="form.hobby" name="hobby" label="个人说明" placeholder="请输入个人说明" />
         </van-cell-group>
         <div style="margin: 16px">
            <van-button @click="submit" round block type="primary" native-type="submit"> 提交修改 </van-button>
         </div>
      </van-form>
   </div>
</template>
